<template lang="html">
    <div style="padding-right:10px;">
      <el-row>
      <el-col :span="4" style="border-right:1px solid #ebeef5;height:100%;">
        <div style="border-bottom:1px solid #ebeef5;font-size:13px;height:48px;line-height:48px;padding-left:10px;">{{treeObj.title}}</div>

        <el-tree style="min-width:120px;"
            :data="treeData"
            :props="treeObj.treeProps"
            :load="loadTree"
            :expand-on-click-node="true"
            :check-on-click-node="false"
            node-key="id"
            :default-expand-all="treeObj.defaultExpandAll"
            @node-click="nodeClick"
            :lazy="treeObj.lazy">
          </el-tree>
      </el-col>
      <el-col :span="20">
        <gridView ref="gridView" :url="url" :menuId="menuId" :type="type" 
            @otherClick="otherClick" @verifyTopBar="verifyTopBar"></gridView>
      </el-col>
    </el-row>
    
  </div>
</template>
<script>

import ltshFrame from "@/../static/js/ltshFrame";
import gridView from "./gridView.vue";
var _this;
export default {
    data() {
        return {
            treeData:[],
            type:'treeGrid',
            currentNodeData:null
        };
    },

    created() {
        
        _this = this;
        console.log(_this.treeObj);
        if(_this.treeObj.lazy==false) {
            _this.myUtils.appRequest({
                url: _this.treeObj.treeUrl,
                method:'post',
                data:{},
                callback:function(data) {
                    _this.treeData = data.content;
                },
                catch: function(res) {
                    console.log(res);
                }
            }, _this);
        }
    },
    mounted() {
    },
    methods: {
        verifyTopBar(obj, callback) {
            obj['currentNodeData'] = _this.currentNodeData;
             _this.$emit('verifyTopBar', obj, callback);
        },
        otherClick(row, fun) {
             _this.$emit('otherClick', row, fun);
        },
        loadTree(node, resolve) {
            var searchParam = {};
            if(_this.treeObj.initParam != null) {
                for (var attr in _this.treeObj.initParam) {
                    searchParam[attr] = _this.treeObj.initParam[attr];
                }
            }
            // if (node.data != null) {
            //     if(_this.treeObj.defaultExpandAll == true 
            //     || _this.treeObj.parentPro==null 
            //     || _this.treeObj.parentPro == '') {
            //         return resolve([]);
            //     }
                
            // }
            if(node != null && node.data.id != null) {
                searchParam[_this.treeObj.parentPro] = node.data.id;
            }
            
            _this.myUtils.appRequest({
                url: _this.treeObj.treeUrl,
                method:'post',
                data:searchParam,
                callback:function(data) {
                    return resolve(data.content);
                },
                catch: function(res) {
                    console.log(res);
                }
            }, _this);
        },
        nodeClick(data, node, tree) {
            _this.currentNodeData = data;
            var idField = _this.treeObj.searchProp;
            var nameField = idField.substr(0,idField.lastIndexOf('Id')) + 'Name';
            var addDefaultValues = [];
            var obj = {};
            obj.name = idField;
            obj.value=data.id;
            addDefaultValues.push(obj);
            obj = {};
            obj.name = nameField;
            obj.value=data[_this.treeObj.nameProp];
            addDefaultValues.push(obj);
            _this.$refs.gridView.setSearchFormData(addDefaultValues);
        }
    },
    props:['url', 'menuId', 'treeObj'],
    components: { gridView }
};
</script>
<style>
    .el-form-item__label {
        width:100px;
    }
</style>
